<template>
  <v-container height="var(--user-overview-height)">
    <v-row>
      <v-col>
        <v-list-item>
          <template #prepend>
            <v-avatar end :image="User.AvatarUrl" rounded="0" />
          </template>
          <template #title>
            {{ User.RealName }}
          </template>
          <template #subtitle>{{ User.Position }}</template>
          <template #append>
            <v-btn size="small" variant="text" icon>
              <v-icon icon="mdi-chevron-down" />
              <v-menu activator="parent" location="bottom right">
                <UserMenuList />
              </v-menu>
            </v-btn>
          </template>
        </v-list-item>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import type { User } from "@/types/User";
import UserMenuList from "./UserMenuList.vue";

const User = ref<User>({
  UserName: "admin_test",
  RealName: "王小明",
  Gender: "Male",
  AvatarUrl: "https://randomuser.me/api/portraits/men/78.jpg", // 随机生成一个头像URL
  Birthday: "1988-07-23",
  Age: 35,
  Bio: "资深软件工程师，热爱技术，专注于前端开发与用户体验。",
  Email: "wang.xm@example.com",
  Phone: "13512345678",
  WeChat: "wx_xiaoming",
  QQ: "876543210",
  Address: "广东省深圳市南山区",
  Role: "Admin",
  Status: "Active",
  RegisterTime: "2021-03-10 09:30:00",
  LastLoginTime: "2023-10-27 16:45:22",
  LoginCount: "256", // 根据接口定义，这里是字符串
  Position: "技术总监",
  Company: "创想互联有限公司",
});
</script>

<style scoped></style>
